<template>
  <div class='CompanyList'>
    <div class="CompanyList-nav">
      <van-nav-bar>
        <template #left>
          <img src="../assets/img/arrow.png" alt=""
               class="arrow"
               @click="backHome">
          <span>企业档案</span>
        </template>
        <template #right>
          <img v-show="isList" @click="isList = !isList"
               src="../assets/img/list.png" alt="">
          <img v-show="!isList" @click="isList = !isList"
               src="../assets/img/card.png" alt="">
          <img src="../assets/img/select.png" @click="isSelect = true"
               class="select" alt="">
        </template>
      </van-nav-bar>
    </div>
    <!--弹出层-->
    <van-popup v-model="isSelect" position="right"
               :style="{ width: '76%', height: '100%' }">
      <div class="CompanyList-popup">
        <div class="CompanyList-popup-title">
          地区
        </div>
        <div class="CompanyList-popup-list">
          <div class="item"
               v-for="(item, index) in locations"
               :key="index" @click="selectLocation(index)"
               :class="{'active': item.isSelect}">
            {{item.name}}
          </div>
        </div>
        <div class="CompanyList-popup-title">
          职业
        </div>
        <div class="CompanyList-popup-list">
          <div class="item"
               v-for="(item, index) in works"
               :key="index" @click="selectWork(index)"
               :class="{'active': item.isSelect}">
            {{item.name}}
          </div>
        </div>
        <div class="CompanyList-popup-btns">
          <div @click="resetBtn">重置</div>
          <div @click="sureBtn">确认</div>
        </div>
      </div>
    </van-popup>
    <div class="CompanyList-content" v-show="isList">
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-content-list van-hairline--bottom">
        <img src="../assets/img/company/card-img.png" alt="">
        <div class="right">
          <div class="title van-ellipsis">
            科技某某装饰公司科技某某装饰公司科技某某装饰公司
          </div>
          <div class="txt van-multi-ellipsis--l3">
            欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式欧式高档餐具套装日式碗碟套装韩式家用碗筷餐具中式碗金用碗筷餐具中式融界人士就使劲儿……
          </div>
        </div>
      </a>
    </div>
    <div class="CompanyList-cards" v-show="!isList">
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
      <a href="/h5/companyDetail" class="CompanyList-cards-item">
        <img src="../assets/img/company/card-img.png" alt="">
        <p class="van-ellipsis">科技某某装饰有限公司科技某某装饰有限公司科技某某装饰有限公司</p>
      </a>
    </div>
    <!--查看更多-->
    <div class="home-more">
      <van-divider :style="{ color: '#0050A5', borderColor: '#BFBFBF', padding: '0 16px' }">查看更多</van-divider>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyList',
  data () {
    return {
      isList: true,
      isSelect: false,
      locations: [
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        }
      ],
      works: [
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        },
        {
          name: '地区名称',
          isSelect: false
        }
      ]
    }
  },
  methods: {
    backHome () {
      this.$router.back()
    },
    selectLocation (index) {
      this.locations.forEach(item => {
        item.isSelect = false
      })
      this.locations[index].isSelect = true
    },
    selectWork (index) {
      this.works.forEach(item => {
        item.isSelect = false
      })
      this.works[index].isSelect = true
    },
    resetBtn () {
      this.locations.forEach(item => {
        item.isSelect = false
      })
      this.works.forEach(item => {
        item.isSelect = false
      })
    },
    sureBtn () {
    }
  }
}
</script>

<style lang='scss'>
  @import "../assets/css/base";

  .CompanyList {
    background-color: rgb(242,242,242);
    overflow: hidden;
    &-nav{
      img{
        width: px2rem(42);
        height: px2rem(42);
        &.select{
          margin-left: px2rem(33);
        }
      }
      span{
        font-size: px2rem(36);
        color: #000000;
        font-weight: 400;
        padding-left: px2rem(26);
      }
    }
    &-content{
      margin-top: px2rem(20);
      background-color: #fff;
      &-list{
        width: 100%;
        height: px2rem(224);
        display: flex;
        box-sizing: border-box;
        padding: px2rem(28) px2rem(44) px2rem(25) px2rem(30);
        &>img{
          width: px2rem(250);
          height: px2rem(171);
          border-radius: px2rem(5);
          display: block;
          margin-right: px2rem(18);
        }
        &>.right{
          width: px2rem(408);
          &>.title{
            color: #000000;
            font-size: px2rem(28);
            margin-bottom: px2rem(26);
          }
          &>.txt{
            font-size: px2rem(24);
            line-height: px2rem(38);
            color: #848484;
          }
        }
      }
    }
    &-cards{
      width: px2rem(710);
      margin: px2rem(20) auto;
      @include flex();
      flex-wrap: wrap;
      &-item{
        width: px2rem(345);
        height: px2rem(283);
        margin-bottom: px2rem(20);
        background-color: #fff;
        &>img{
          width:px2rem(345);
          height:px2rem(227);
          border-radius:px2rem(5);
        }
        &>p{
          font-size: px2rem(26);
          color: #000000;
          line-height: 1.5;
          margin-left: px2rem(10);
        }
      }
    }
    &-popup{
      width: px2rem(503);
      margin: 0 auto;
      height: 100%;
      padding-top: px2rem(24);
      &-title{
        margin-top: px2rem(36);
        margin-bottom: px2rem(32);
        font-size: px2rem(28);
        color: #000000;
        &:first-child{
        }
      }
      &-list{
        display: flex;
        flex-wrap: wrap;
        &>.item{
          width:px2rem(147);
          height:px2rem(53);
          margin-right: px2rem(31);
          background:rgba(242,242,242,1);
          border-radius:px2rem(5);
          line-height: px2rem(53);
          text-align: center;
          font-size: px2rem(22);
          color:#929292;
          margin-bottom: px2rem(24);
          &:nth-child(3n) {
            margin-right: 0;
          }
          &.active{
            background:rgba(0,80,165,.1);
            color: #0050A5;
          }
        }
      }
      &-btns{
        margin-top: px2rem(100);
        @include flex();
        &>div{
          &:first-child{
            width:px2rem(234);
            height:px2rem(60);
            border:px2rem(1) solid rgba(0,80,165,1);
            border-radius:px2rem(30);
            background-color: #fff;
            text-align: center;
            line-height: px2rem(60);
            color: $mainColor;
            font-size: px2rem(28);
          }
          &:last-child{
            width:px2rem(234);
            height:px2rem(60);
            background:rgba(0,80,165,1);
            border-radius:px2rem(30);
            text-align: center;
            line-height: px2rem(60);
            font-size: px2rem(30);
            color: #ffffff;
          }
        }
      }
    }
  }
</style>
